<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        ul{
            position: absolute;
            top: 320px;
            width: 20%;
            display: flex;
            justify-content: space-around;
            opacity: 0.3;
            margin: 0 auto;
        }

        ul li{
            background: #000000;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            list-style: none;
            z-index: 20;
        }
        .img{
            position: relative;
            top: 150px;
            display: flex;
            justify-content: space-around;
            align-content: center;
        }

        .btns{
            display: flex;
            position: absolute;
            top: 50px;
            width: 780px;
            height: 50%;
            justify-content: space-between;
            align-items: center;
        }
        .btn{
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            top: 30px;
            width: 50px;
            height: 100px;
            background: #989898;
            opacity: 0.4;
        }


    </style>
    <script src="js/jquery.js"></script>
    <script>
        let count=1;
        let interval;
       $(function () {
           $(".btns").hide();
            interval = setInterval(imgchange,2000);//定时调用
            $(".img").hover(function () {
                clearInterval(interval);
                //鼠标移入时，按钮显示
                $(".btns").show();
            },function () {
                interval=setInterval(imgchange,2000);
                $(".btns").hide();
            });

           $("#btn1").click(function () {
               let jQuery = $("#imgs").attr("src").toString();
               let s = jQuery.substring(4,5);
               let number = parseInt(s)-1;
               if(number==0){
                   number=5;
               }
               $("#imgs").attr("src","img/"+number+".jpg");
           })

           $("#btn2").click(function () {
               let jQuery = $("#imgs").attr("src").toString();
               let s = jQuery.substring(4,5);
               let number = parseInt(s)+1;
               if(number==6){
                   number=1;
               }
               $("#imgs").attr("src","img/"+number+".jpg");
           })

           //鼠标移入
           $("li").mouseenter(function () {
               clearInterval(interval);
                let value = $(this).val();
               $("#imgs").attr("src","img/"+value+".jpg");
           });

       })

        //轮播
        function imgchange() {
            $("#imgs").fadeToggle("fast",function () {
                $("#imgs").fadeToggle("fast").attr("src","img/"+count+".jpg");
            });
            count++;
            if(count>5){
                count=1;
            }
        }


    </script>

</head>
<body>
<div class="img">
    <img src="img/1.jpg" id="imgs">
    <ul>
        <li id="li1" value="1" ></li>
        <li id="li2" value="2" ></li>
        <li id="li3" value="3"></li>
        <li id="li4" value="4" ></li>
        <li id="li5" value="5" ></li>
    </ul>
    <div class="btns">
        <div class="btn" id="btn1">
             <
        </div>
        <div class="btn" id="btn2">
            >
        </div>
    </div>

</div>


</body>

</html>